import Image from "next/image"
import Link from "next/link"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"

interface CollectionCardProps {
  name: string
  description: string
  imageSrc: string
  link: string
}

export function CollectionCard({ name, description, imageSrc, link }: CollectionCardProps) {
  return (
    <Card className="flex flex-col overflow-hidden rounded-lg shadow-lg transition-transform duration-300 hover:scale-105">
      <CardHeader className="p-0">
        <div className="relative w-full h-60">
          <Image
            src={imageSrc || "/placeholder.svg"}
            alt={name}
            layout="fill"
            objectFit="cover"
            className="rounded-t-lg"
          />
        </div>
      </CardHeader>
      <CardContent className="flex-grow p-4 text-center">
        <CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-50 mb-2">{name}</CardTitle>
        <p className="text-gray-600 dark:text-gray-400 text-sm mb-4">{description}</p>
        <Button
          asChild
          variant="outline"
          className="bg-black text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200"
        >
          <Link href={link}>View Collection</Link>
        </Button>
      </CardContent>
    </Card>
  )
}
